<template>
    <div class="users">
        <el-row class="bar">
            <el-button type="primary" @click="handleAdd" icon="el-icon-plus" >新增</el-button>
        </el-row>
        <el-table :data="users" stripe border >
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="admin" :formatter="convertToBolean" 　label="管理员"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">

            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Users",
        data(){
           return {
               users:null,
               dialogVisible:false,
               form: {
                   name: '',
                   region: '',
                   date1: '',
                   date2: '',
                   delivery: false,
                   type: [],
                   resource: '',
                   desc: ''
               },
               formLabelWidth: '120px'
           }
        },
        created:function () {
            console.log("created--start");
            this.$http.get('/users')
                .then(res=>{
                    this.users = res.data.list;
                    console.log(this.users);

                })
                .catch(error=>{
                    console.log(error);
                });
        },
        methods:{
            convertToBolean(row, column, cellValue, index){
                if(cellValue == 1){
                    return "true";
                }else{
                    return "false";
                }
            },
            handleAdd(){
                this.dialogVisible = true;
            },
            handleClose(){

            }
        }

    }
</script>

<style scoped>
    .bar{
        text-align: left;
        margin-bottom: 10px;
    }
</style>